import "./App.scss";
import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/list";

export default class App extends Component {
  state = {
    all:false,
    listInfo: [
      {
        id: 0,
        task: "写作业",
        status: false,
      },
      {
        id: 1,
        task: "玩游戏",
        status: true,
      },
      {
        id: 2,
        task: "打代码",
        status: false,
      },
    ],
  }; 
  delAllList = () => {
    let { listInfo } = this.state;
    listInfo = listInfo.filter((v) => {
      return !v.status
    });
    if(listInfo.length==0){
      this.setState({ all:false });
    }
    this.setState({ listInfo });
  }
  changeStatus = (id, s) => {
    let { listInfo } = this.state;
    console.log("触发了", id, s);
    listInfo = listInfo.map((v) => {
      if (v.id == id) {
        return { ...v, status: s };
      } else {
        return v;
      }
    });
    const temp = listInfo.every(v=>{
      return v.status
    })
    this.setState({ listInfo,all:temp });
  };
  delList = (id) => {
    let { listInfo } = this.state;
    listInfo = listInfo.filter((v) => {
      return v.id != id;
    });
    if(listInfo.length==0){
      this.setState({ all:false });
    }
    this.setState({ listInfo });
  };
  completeNum() {
    let a = this.state.listInfo.filter((v) => {
      return v.status;
    });
    return a.length;
  }
  addList = (v) => {
    console.log("执行了啊", v);
    let { listInfo } = this.state;
    listInfo = [v, ...listInfo];
    this.setState({ listInfo });
  };
  selectAll = (e) => {
    let { listInfo } = this.state;
    listInfo = listInfo.map((v) => {
      return {...v,status:e.target.checked}
    });
    this.setState({ listInfo,all:e.target.checked });
  }
  render() {
    const { listInfo } = this.state;
   
    return (
      <div className="app">
        <Header addList={this.addList} />
        <List
          listInfo={listInfo}
          delList={this.delList}
          changeStatus={this.changeStatus}
        />
        <div className="footer">
          <div>
            <input type="checkbox" onChange={this.selectAll} checked={this.state.all&&this.state.listInfo.length>0} />
          </div>
          <div style={{display:'flex',justifyContent:'space-between',width:'100%'}}>
            <div>
              已完成{this.completeNum()}/全部{this.state.listInfo.length}
            </div>
            <div>
              <input type="button" onClick={this.delAllList} value="删除完成任务"/>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
